<template>
    <transition
        enter-class
        enter-active-class="animated fadeIn"
        enter-to-class
        leave-class
        leave-active-class="animated fadeOut"
        leave-to-class
    >
        <div class="toast" v-if="bln">{{text}}</div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            bln: false,
            text: ""
        };
    },
    methods: {},
    created() {
        this.$eventBar.$on(
            "showToast",
            function(str) {
                this.bln = true;
                this.text = str;
                setTimeout(() => {
                    this.bln = false;
                }, 3000);
            }.bind(this)
        );
    }
};
</script>

<style>
</style>